<!--
 * @Descripttion:
 * @version:
 * @Author: Connor
 * @Date: 2021-03-02 09:03:50
 * @LastEditors: Sam
 * @LastEditTime: 2021-12-03 15:53:56
-->
<template>
  <el-form size="mini" label-position="left" label-width="68px">
    <el-card class="margin-tb" :class="{ 'btn-header': pageType }">
      <div slot="header" class="clearfix relative small-header">
        <el-row>
          <el-col
            :sm="24"
            :md="24"
            :lg="21"
            :xl="21"
            class="flex  align-center justify-start"
          >
            <div class="title-icon ">
              <span>M单 </span>
            </div>
            <el-form-item
              prop="houseNumberSender"
              class="margin-lr"
              style="margin-bottom:0"
            >
              <div v-if="isChangeMno" slot="label">M单号:</div>
              <el-input
                v-if="isChangeMno"
                type="text"
                size="mini"
                v-model.trim="MInfo.masterNumber"
                :maxlength="
                  MInfo.shippingWay == 'FCL' ||
                  MInfo.shippingWay == 'LCL' ||
                  MInfo.shippingWay == 'FCLG' ||
                  MInfo.shippingWay == 'LCLG'
                    ? 100
                    : 12
                "
              ></el-input>

              <span @click="gotoNetAddress" v-else>M单号:{{ MInfo.masterNumber }}</span>
            </el-form-item>

            <el-form-item class="margin-lr" style="margin-bottom:0">
              <el-button
                v-if="isEdit"
                type="text"
                size="mini"
                @click="isSaveChangeMno"
              >
                {{ isChangeMno ? "保存" : "编辑" }}
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="pageType == 'seaFreight'"
              prop="houseNumberSender"
              class="margin-lr"
              style="margin-bottom:0"
            >
              <div v-if="isChangeSo" slot="label">SO号:</div>
              <el-input
                v-if="isChangeSo"
                type="text"
                size="mini"
                v-model="MInfo.soNumber"
              ></el-input>

              <span v-else>SO号:{{ MInfo.soNumber }}</span>
            </el-form-item>
            <el-form-item
              class="margin-lr"
              v-if="pageType == 'seaFreight'"
              style="margin-bottom:0"
            >
              <el-button
                v-if="isEdit"
                type="text"
                size="mini"
                @click="isSaveChangeSo"
              >
                {{ isChangeSo ? "保存" : "编辑" }}
              </el-button>
            </el-form-item>

            <div v-if="showAirHDopt && isEdit" class="flex margin-left">
              <el-button-group>
                <!--<el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-download"
                  @click="downloadManifest"
                >
                  导出MANIFEST
                </el-button>-->
                <el-dropdown>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="downloadManifest('excel')"
                  >
                    导出MANIFEST<i
                      class="el-icon-arrow-down el-icon--right"
                    ></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="downloadManifest('excel')"
                      >EXCEL</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="downloadManifest('pdf')"
                      >PDF</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <!--<el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-download"
                  @click="downloadMawb"
                >
                  导出MAWB
                </el-button>-->
                <el-dropdown>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="downloadMawb('excel')"
                  >
                    导出MAWB<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="downloadMawb('excel')"
                      >EXCEL</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="downloadMawb('pdf')"
                      >PDF</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>

                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-refresh"
                  @click="toHOrder"
                >
                  同步运单数据给H单
                </el-button>
              </el-button-group>
              <div style="width:20vw">
                <el-select
                  v-model="value1"
                  multiple
                  filterable
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="(k, v) in singleOptions"
                    :key="v"
                    :label="k"
                    :value="parseInt(v)"
                  >
                  </el-option>
                </el-select>
              </div>
              <el-button-group>
                <!--<el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-download"
                  @click="batchDownloadMawb"
                >
                  批量导出HAWB
                </el-button>-->
                <el-dropdown>
                  <el-button
                    type="primary"
                    size="mini"
                    @click.native="batchDownloadMawb('excel')"
                  >
                    批量导出HAWB<i
                      class="el-icon-arrow-down el-icon--right"
                    ></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="batchDownloadMawb('excel')"
                      >EXCEL</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="batchDownloadMawb('pdf')"
                      >PDF</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- <el-dropdown> -->
                <el-button
                  size="mini"
                  type="primary"
                  @click.native="batchDownloadMergePackingInvoice()"
                >
                  批量导出分单模板
                </el-button>
                <!-- </el-dropdown> -->
                <!-- <el-button type="primary" size="mini" @click="selectAll">
                  全选
                </el-button> -->
              </el-button-group>
            </div>
          </el-col>
          <el-col
            :sm="24"
            :md="24"
            :lg="3"
            :xl="3"
            class="flex  align-center justify-end"
            v-if="isEdit"
          >
            <el-button
              size="mini"
              type="success"
              class="header-cancel-btn"
              @click="CopyMOrderInfo"
              >复制</el-button
            >
            <CopyMasterOrder ref="CopyMOrderV" :waybillId="MInfo.id">
            </CopyMasterOrder>
            <el-button
              size="mini"
              type="info"
              class="header-cancel-btn"
              v-if="isChangeMInfo"
              @click="isChangeMInfo = false"
              >取消</el-button
            >
            <el-button
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeMInfo"
            >
              {{ isChangeMInfo ? "保存" : "编辑" }}
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item prop="houseNumberSender">
            <div slot="label">发件人:</div>
            <div v-if="isChangeMInfo">
              <el-select
                v-model="MInfo.serachSender"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('masterNumberSender')"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="MInfo.masterNumberSender"
              ></el-input>
            </div>
            <!-- <span v-else>{{ MInfo.masterNumberSender }}</span> -->
            <span v-else v-html="MInfo.masterNumberSender"></span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberReceiver">
            <div slot="label">收件人:</div>

            <div v-if="isChangeMInfo">
              <el-select
                v-model="MInfo.serachReceiver"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('masterNumberReceiver')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="MInfo.masterNumberReceiver"
              ></el-input>
            </div>
            <span v-else>{{ MInfo.masterNumberReceiver }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="masterNumberNotifier">
            <div slot="label">通知人:</div>

            <div v-if="isChangeMInfo">
              <el-select
                v-model="MInfo.serachNotifier"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('masterNumberNotifier')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="MInfo.masterNumberNotifier"
              ></el-input>
            </div>
            <span v-else>{{
              MInfo.masterNumberNotifier == null ||
              MInfo.masterNumberNotifier == ""
                ? "SAME AS CONSIGNEE"
                : MInfo.masterNumberNotifier
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="masterNumberAgent">
            <div slot="label">代理:</div>

            <div v-if="isChangeMInfo">
              <el-select
                v-model="MInfo.serachAgent"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('masterNumberAgent')"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="MInfo.masterNumberAgent"
              ></el-input>
            </div>
            <span v-else>{{ MInfo.masterNumberAgent }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="nameDescription">
            <div slot="label">品名描述:</div>
            <div>
              <el-button
                type="text"
                size="mini"
                @click="synchronizedProductName"
              >
                同步品名
              </el-button>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="MInfo.nameDescription"
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="dimension" v-if="isLCLFCL">
            <div slot="label">尺寸:</div>
            <el-button type="text" size="mini"> </el-button>
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="MInfo.dimension"
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import { ajax, actionPermission } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { m } from "@/store/yg/common/local";
import CopyMasterOrder from "./CopyMasterOrder";

export default {
  props: {
    pageType: {
      type: String,
      default: ""
    },
    waybillData: {},
    singleOptions: {
      type: Object,
      default: function() {
        return {};
      }
    },
    isEdit: {
      type: Boolean,
      default: function() {
        return true;
      }
    }
  },
  components: {
    CopyMasterOrder
  },
  data() {
    return {
      showAirHDopt: false,
      isLCLFCL: true,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      isChangeSo: false,
      isChangeMno: false,
      value1: [],
      restaurants: [],
      isChangeMInfo: false,
      MInfo: {
        id: 0,
        waybillId: 0,
        masterNumber: "", // M单号：
        masterNumberSender: "", // M单号：发件人
        masterNumberReceiver: "", // M单号：收件人
        masterNumberNotifier: "", // M单号：通知人
        masterNumberAgent: "", // M单号：代理
        serachSender: "",
        serachReceiver: "",
        serachNotifier: "",
        serachAgent: ""
      }
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
    var constMInfo = {};
    constMInfo.id = this.waybillData.id;
    constMInfo.waybillId = this.waybillData.id;
    constMInfo.masterNumber = this.waybillData.masterNumber;
    constMInfo.masterNumberSender = this.waybillData.masterNumberSender;
    constMInfo.masterNumberReceiver = this.waybillData.masterNumberReceiver;
    constMInfo.masterNumberNotifier = this.waybillData.masterNumberNotifier;
    constMInfo.masterNumberAgent = this.waybillData.masterNumberAgent;
    constMInfo.serachSender = this.waybillData.serachSender;
    constMInfo.serachReceiver = this.waybillData.serachReceiver;
    constMInfo.serachNotifier = this.waybillData.serachNotifier;
    constMInfo.serachAgent = this.waybillData.serachAgent;
    constMInfo.dimension = this.waybillData.dimension;
    constMInfo.nameDescription = this.waybillData.nameDescription;
    constMInfo.shippingWay = this.waybillData.shippingWay;
    constMInfo.soNumber = this.waybillData.soNumber;
    this.MInfo = constMInfo;

    if (
      this.MInfo.masterNumberNotifier == null ||
      this.MInfo.masterNumberNotifier == ""
    ) {
      this.MInfo.masterNumberNotifier = "SAME AS CONSIGNEE";
    }
    this.MInfo.waybillId = this.waybillData["id"];
    var shippingWay = this.waybillData["shippingWay"];
    var hdType = this.waybillData["hdType"];
    if (shippingWay && shippingWay == "AIR") {
      this.showAirHDopt = true;
    }
    if (shippingWay && (shippingWay == "FCL" || shippingWay == "LCL")) {
      this.isLCLFCL = false;
      this.pageType = "seaFreight";
    }
    if (hdType && hdType == "1") {
      this.showAirHDopt = true;
    }
    console.log("this.MInfo :>> ", this.MInfo);
  },
  methods: {

    gotoNetAddress(){
      var netAddress = this.waybillData["netAddress"];
      console.log(netAddress);
      if (netAddress && netAddress != '') {
          var a = document.createElement("a");
          a.setAttribute("href", netAddress);
          a.setAttribute("target", "_blank");
          a.click();
      }

    },

    synchronizedProductName() {
      var param = {};
      param["id"] = this.$route.query.waybillId;
      ajax("synchronizedProductName", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            this.$message.error("合单无品名可同步");
          } else {
            if (null == res.data) {
              this.$message.error("合单无品名可同步");
            } else {
              this.MInfo.nameDescription = res.data;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    async selectSenderM(type) {
      var parmValue = "";
      if (type === "masterNumberSender") {
        parmValue = this.MInfo.serachSender;
      } else if (type === "masterNumberReceiver") {
        parmValue = this.MInfo.serachReceiver;
      } else if (type === "masterNumberNotifier") {
        parmValue = this.MInfo.serachNotifier;
      } else if (type === "masterNumberAgent") {
        parmValue = this.MInfo.serachAgent;
      }
      await ajax("queryServiceCompanyById", { id: parmValue }).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              const html =
                res.data["companyNameEn"] +
                "\n" +
                res.data["companyAddressEn"] +
                "\n" +
                "TEL:" +
                res.data["firstContactPhone"] +
                "\n" +
                res.data["vatNumber"];
              this.$set(this.MInfo, type, html);
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    loadAll() {
      ajax("getOptionsByparam", { type: "serveCompany" }).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              this.restaurants = res.data;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    isSaveChangeSo() {
      if (this.isChangeSo) {
        this.isChangeSo = false;
        var param = this.MInfo;
        ajax("changeMInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.$message.success("保存成功");
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeSo = true;
      }
    },

    isSaveChangeMno() {
      if (this.isChangeMno) {
        this.isChangeMno = false;
        var param = this.MInfo;
        this.MInfo.masterNumber = this.MInfo.masterNumber.replace(/\s/g, "");
        ajax("changeMInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.$message.success("保存成功");
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeMno = true;
      }
    },
    changeMInfo() {
      if (this.isChangeMInfo) {
        this.isChangeMInfo = false;
        var param = this.MInfo;
        ajax("changeMInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.$message.success("保存成功");
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeMInfo = true;
      }
    },
    downloadManifest(type) {
      const waybillId = this.$route.query.waybillId;
      const shippingway = this.$route.query.shippingway;
      var param = {};
      param["id"] = waybillId;
      param["param1"] = type;
      ajax("exportManifest", param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("系统错误!");
            }
          } else {
            var path = (path = constant.FILE_SERVER + res.data2);
            var fileUrl = path + res.data;
            console.log(fileUrl);
            window.open(fileUrl);
          }
        },
        error => {
          console.log(error);
        }
      );
      // this.downLoadFile("exportManifest", "导出MANIFEST", waybillId);
    },
    downloadMawb(type) {
      const waybillId = this.$route.query.waybillId;
      const shippingway = this.$route.query.shippingway;
      this.downLoadFile("exportWaybillMergeMawb", "导出MAWB", waybillId, type);
    },
    toHOrder() {
      this.$confirm("此操作将同步运单数据给H单是否继续？")
        .then(_ => {
          // TODO 保存操作
          const waybillId = this.$route.query.waybillId;
          var param = {};
          param["id"] = waybillId;
          ajax("synWaybillToMarkedSingleWaybill", param).then(
            res => {
              if (res.code != 200) {
                if (null != res.message) {
                  this.$message.error(m(res.message));
                } else {
                  this.$message.error("同步失败!");
                }
              } else {
                this.$message.success("同步成功!");
              }
            },
            error => {
              console.log(error);
            }
          );
        })
        .catch(_ => {});
    },
    batchDownloadMawb(type) {
      var param = {};
      if (!this.value1 || this.value1.length < 1) {
        var listIds = [];
        for (const key in this.singleOptions) {
          listIds.push(key);
        }
        param["ids"] = listIds;
      }
      param["param1"] = type;
      ajax("batchExportHawb", param).then(
        res => {
          console.log(res);
          if (null != res.errorMesage && res.errorMesage != "") {
            this.$message.error(m(res.errorMesage));
          } else {
            var path = constant.FILE_SERVER + res.path;
            location.href =
              constant.API_SERVER +
              "/open/downloadFileByHttp?fileName=" +
              res.fileName +
              "&path=" +
              path +
              res.fileName;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    batchDownloadMergePackingInvoice() {
      var param = {};
      if (!this.value1 || this.value1.length > 0) {
        var listIds = new Array();
        for (const key in this.value1) {
          console.log(key);
          listIds.push(this.value1[key]);
        }
        console.log(this.value1);
        param["ids"] = listIds;
      }
      param["param1"] = this.waybillData.customsClearanceAgent;
      param["id"] = this.waybillData.id;
      console.log("param", param["ids"]);
      ajax("exportMergePackingInvoice", param).then(
        res => {
          console.log(res);
          if (null != res.errorMesage && res.errorMesage != "") {
            this.$message.error(m(res.errorMesage));
          } else {
            var path = constant.FILE_SERVER + res.path;
            location.href =
              constant.API_SERVER +
              "/open/downloadFileByHttp?fileName=" +
              res.fileName +
              "&path=" +
              path +
              res.fileName;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    downLoadFile(postUrl, info, waybillId, type) {
      // TODO 保存操作
      var param = {};
      param["id"] = waybillId;
      param["param1"] = type;
      ajax(postUrl, param).then(
        res => {
          console.log(res);
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("系统错误!");
            }
          } else {
            var path = (path = constant.FILE_SERVER + res.data2);
            var fileUrl = path + res.data;
            console.log(fileUrl);
            window.open(fileUrl);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    selectAll() {
      if (null != this.singleOptions) {
        for (const key in this.singleOptions) {
          this.value1.push(this.singleOptions[key]);
        }
      }
    },
    CopyMOrderInfo() {
      this.$refs.CopyMOrderV.CopyMasterOrderVisible = true;
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}

.btn-header >>> .el-card__header {
  padding: 8px 20px;
}
</style>
